<template>
  <div class="app-container">
    <a-card class="box-card">
      <template #header>
        <span>发起流程</span>
      </template>
      <div class="form-conf" v-if="dialog.visible">
        <div class="cu-submit">
          <a-button type="primary" @click="submit">提交</a-button>
          <a-button @click="reset">重置</a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup name="WorkStart">
  import { processApi } from '/@/api/workflow/work';

  import { message } from 'ant-design-vue';

  const route = useRoute();
  const { proxy } = getCurrentInstance();

  const vfRenderRef = ref(null);

  const deployId = ref();
  const definitionId = ref();
  const formModel = ref({});
  const formData = ref({});

  const dialog =
    reactive <
    DialogOption >
    {
      visible: false,
      title: '',
    };

  const initData = async () => {
    deployId.value = route.params && route.params.deployId;
    definitionId.value = route.query && route.query.definitionId;
    const res = await processApi.getProcessForm({ definitionId: definitionId.value, deployId: deployId.value });
    formModel.value = res.data;
    dialog.visible = true;
    nextTick(async () => {
      vfRenderRef.value.setFormJson(formModel.value || { formConfig: {}, widgetList: [] });
    });
  };

  const submit = async () => {
    const data = await vfRenderRef.value.getFormData();
    if (definitionId.value) {
      const res = await processApi.startProcess(definitionId.value, JSON.stringify(data));
      message.success(res.msg);
      const obj = { path: '/work/own' };

      proxy?.tab.closeOpenPage(obj);
    }
  };

  const reset = () => {
    vfRenderRef.value.resetForm();
  };

  onMounted(() => {
    initData();
  });
</script>

<style scoped>
  .form-conf {
    margin: 15px auto;
    width: 80%;
    padding: 15px;
  }
</style>
